<template>
  <div class="main">
    <!-- <div class ="title">
			<span>个人信息</span>
		</div> -->
    <div class="info">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="ruleForm"
        label-width="80px"
        style="margin-top: 10px"
        size="small"
      >
        <el-form-item label="手机号" prop="Mobile">
          <el-input v-model="ruleForm.Mobile" @change="findUserInfo"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="Name">
          <el-input v-model="ruleForm.Name"></el-input>
        </el-form-item>
        <el-form-item
          label="所属辖区"
          prop="CountryCode"
        >
          <el-select
            ref="select1"
            @hook:mounted="cancalReadOnly"
            @visible-change="cancalReadOnly"
            v-model="ruleForm.CountryCode"
            filterable
            clearable
            @change="CountryChange2"
            placeholder="请选择您现在所属辖区"
            :popper-append-to-body="false"
            popper-class="select"
          >
            <el-option
              v-for="item in CountryList"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在单位" prop="Company">
          <el-select
            ref="select2"
            @hook:mounted="cancalReadOnly"
            @visible-change="cancalReadOnly"
            v-model="ruleForm.Company"
            filterable
            clearable
            @change="CompanyChange"
            placeholder="请选择您现在所属单位"
            :popper-append-to-body="false"
            popper-class="select"
          >
            <el-option
              v-for="item in CompanyList"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
      <div class="bottom_submit">
        <van-button class="button" type="primary" @click="_submit('ruleForm')"
          >确 定</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import checkTypeDialog from "@/views/qtyj/qtyjReport/checkTypeDialog.vue";
import checkCompanyDialog from "@/views/qtyj/qtyjReport/checkCompanyDialog.vue";
import { Toast } from "vant";
import store from "@/store/index";
export default {
  components: {
    checkTypeDialog,
    checkCompanyDialog,
  },
  data() {
    return {
      mID: 0, //监管单位ID
      ProjectCompanyCode: process.env.VUE_APP_COMPANYCODE,
      ruleForm: {
        Name: "",
        Mobile: "",
        Town: "桥头镇",
        Country: "",
        CountryCode: "",
        CompanyCode: "",
        Company: "",
        Adress: "",
        videotime: 0,
        fileid: 0,
        Area:''
      },
      CountryList: [],
      CompanyList: [],
      CompanyTypeList: [
        {
          type: 0,

          name: "工贸企业",
        },
        {
          type: 1,
          id: 196505,
          name: "劳务派遣公司",
        },
        {
          type: 2,
          id: 196506,
          name: "再生资源回收企业",
        },
      ],
      codetype: 0,
      rules: {
        Name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        Mobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            min: 8,
            max: 11,
            message: "长度在 8 到 11 个字符",
            trigger: "blur",
          },
        ],
        CountryCode: [
          { required: true, message: "请选择您现在所属辖区", trigger: "change" },
        ],

        Company: [
          {
            required: true,
            message: "请选择您现在所属单位",
            trigger: "change",
          },
        ],
      },
 
  
      companyTypeShow: false,
      ConpanyType: 1,
      ConpanyTypeName: "",
    };
  },
  created() {
    this.ruleForm.CountryTypeCode = 0;
    this.ConpanyTypeChange(0);
    this.ruleForm.videotime = this.$route.query.videotime;
    this.ruleForm.fileid = this.$route.query.fileid;
    if (this.$route.query.codetype != undefined) {
      if (!isNaN(parseInt(this.$route.query.codetype))) {
        this.codetype = parseInt(this.$route.query.codetype) > 0 ? 1 : 0;
      }
    }
  
  },

  methods: {
    findUserInfo() {
      var self = this;
      var data = {};
      let params = { mobile: self.ruleForm.Mobile };
      this.$axios
        .get("/UserStudyTime/GetUserInfoByMobile", { params: params })
        .then((res) => {
          if (res.data.data != null) {
            data = res.data.data;
            if (this.codetype == 1) {
              self.ruleForm.Name = data.Name;
              self.ruleForm.Name = res.data.data.Name;
              self.ruleForm.CountryCode = res.data.data.CountryCode;
              self.ruleForm.Country = res.data.data.Country;
              self.CountryChange2(res.data.data.CountryCode);
              self.ruleForm.CompanyCode = res.data.data.CompanyCode;
              self.ruleForm.Company = res.data.data.Company;
            } else {
              this.ruleForm.CountryTypeCode = this.CompanyTypeList[0].name;
              self.ruleForm.Name = res.data.data.Name;
              self.ruleForm.CountryCode = res.data.data.CountryCode;
              self.ruleForm.Country = res.data.data.Country;
              // self.CountryChange(res.data.data.CountryCode);
              self.ruleForm.CompanyCode = res.data.data.CompanyCode;
              self.ruleForm.Company = res.data.data.Company;
            }
          } else {
            if (self.codetype == 1) {
              console.log("elf.codetype==1)");
              self.ruleForm.Name = "";
            } else {
              self.ruleForm.Name = "";
              self.ruleForm.CountryCode = "";
              self.ruleForm.CompanyCode = "";
            }
          }
        });
    },

    cancalReadOnly(value) {
      this.$nextTick(() => {
        if (!value) {
          const { select0, select1, select2 } = this.$refs;
          const input1 = select1.$el.querySelector(".el-input__inner");
          const input2 = select2.$el.querySelector(".el-input__inner");
          const input0 = select0.$el.querySelector(".el-input__inner");
          input1.removeAttribute("readonly");
          input2.removeAttribute("readonly");
          input0.removeAttribute("readonly");
          this.$refs.select.blur();
          根据tip自行判断是否添加;
        }
      });
    },
    cancalReadOnly2(value) {
      console.log("cancalReadOnly2");
      console.log(value);
      this.$nextTick(() => {
        if (!value) {
          // const { select0,select1, select2 } = this.$refs;
          // const input1 = select1.$el.querySelector(".el-input__inner");
          // const input2 = select2.$el.querySelector(".el-input__inner");
          // const input0 = select0.$el.querySelector(".el-input__inner");
          // input1.removeAttribute("readonly");
          // input2.removeAttribute("readonly");
          // input0.removeAttribute("readonly");
          // this.$refs.select.blur();  根据tip自行判断是否添加
          //     this.ruleForm.CountryCode="";
          // this.ruleForm.CompanyCode = "";
          // this.ruleForm.Company = "";
        }
      });
    },
    _LoadCountryList(companycode, state, istown, slice) {
      var self = this;
      let params = { companycode: companycode, state: state, isown: istown };
      this.$axios
        .get("/UserStudyTime/GetChildCompanyList", { params: params })
        .then((res) => {
          if (slice) {
            self.CountryList = res.data.slice(1);
            self.CompanyList = [];
          } else {
            self.CompanyList = res.data;
          }
        });
    },
    // 提交数据
    _submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var self = this;
          this.$axios
            .post("/UserStudyTime/SaveWatchLog", {
              Name: this.ruleForm.Name,
              Mobile: this.ruleForm.Mobile,
              Country: this.ruleForm.Country,
              Company: this.ruleForm.Company,
              CountryCode: this.ruleForm.CountryCode,
              CompanyCode: this.ruleForm.CompanyCode,
              videotime: this.ruleForm.videotime,
              fileid: this.ruleForm.fileid,
              username: this.$store.state.userName,
            })
            .then((res) => {
              if (res.success) {
                self.$toast.success("数据已保存");
                this.$router.push({
                  path: "/qtyjReport/studylog",
                  query: {
                    mobile: this.ruleForm.Mobile,
                    codetype: this.codetype,
                  },
                });
              } else {
                self.$toast("提交失败，请检查填写是否有误!");
              }
            });
        } else {
          return false;
        }
      });
    },
    // 触发事件
    CountryChange2(type) {
      if (type) {
        this.ruleForm.Area = this.CountryList.find((n) => n.ID == type).Name;

        this._LoadCountryList(type, 0, 0);
      } else {
        this.ruleForm.Country = "";
      }
      this.ruleForm.CompanyCode = "";
      this.ruleForm.Company = "";
    },
    CompanyChange(type) {
      if (type) {
        this.ruleForm.Company = this.CompanyList.find((n) => n.ID == type).Name;
        this.ruleForm.CompanyCode = this.CompanyList.find(
          (n) => n.ID == type
        ).ID;
      } else {
        this.ruleForm.Company = "";
      }
    },
    ConpanyTypeChange(type) {
      if (type != null && type >= 0) {
        this.ConpanyType = type;
        this.ConpanyTypeName = this.CompanyTypeList[type].name;
        this.ruleForm.CountryTypeCode = this.CompanyTypeList[type].name;
        if (type == 0) {
          this._LoadCountryList(this.ProjectCompanyCode, 0, 0, true);
        } else {
          this._LoadCountryList(this.CompanyTypeList[type].id, 0, 0);
          this.ruleForm.CountryCode = this.CompanyTypeList[type].id;
          this.ruleForm.Country = this.CompanyTypeList[type].name;
        }
      }
      this.ruleForm.CompanyCode = "";
      this.ruleForm.Company = "";
    },
  },
};
</script>

<style lang="less">
body {
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
}

.title {
  height: 30px;
  font-size: 20px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

/deep/.el-select-dropdown {
  position: absolute !important;
  left: 0px !important;
  border: 1px solid #010f13;
}

.main {
  background: #ffffff;
  height: auto;
}

.van-field__label {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  box-sizing: border-box;
  width: 50px;
  margin-right: 0.32rem;
  color: #646566;
  text-align: left;
  word-wrap: break-word;
}

.info {
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 20px;
}

.bottom_submit {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.button {
  width: 98%;
}
</style>
